<template>
	<div class="preview-page-box" :class="addPaddingTop">
		<div class="title" >
			<van-icon name="arrow-left" color="#fff" size="1.2rem"  class="title-icon" @click="previewBack" />
			<span>{{titleText}}</span>
		</div>
		<div class="video-top-box" :class="classBg">
			<em>&nbsp;</em>
			<div class="video-box">
				<!-- <div class="video-cover-box" v-if="videoCoverBox">
					 <img :src="roomInfo.roomInfo.imagUrl + '?x-oss-process=image/resize,m_fixed,h_424,w_750'">
					<div class="play-btn" @click="playBtn" v-if="isPlayBtn"></div>					
				</div> -->
				<div class="live-title" :class="{move: !showTitle}">
						<p>{{ roomInfo.roomInfo.title }}</p>
				</div>
				<VideoCom ref='videoCom' v-show='isVideoDom' :videoInfo='roomInfo.roomInfo' type='wScreen'
					status="living" />
				<div class="item-title-img-type">
					<div class="title-img">
						<img src="@/assets/images/zxjt/bg.png" alt="">
						<span class="title-img-yugao">预告</span>
						<span class="title-img-time">{{ beginTime }}</span>
					</div>
				</div>
			</div>
			<div class="yugao-img-bottom">
				<p>距离直播开始还有</p>
			</div>
		</div>
		<!-- 时间倒计时 -->
		<van-count-down :time="time" class="time" @finish="timeFinish">
			<template slot-scope="prop">
				<div class="time-item" v-if="prop.days >= 1">
					<div class="time-item-left">
						<span>{{ prop.days >= 10 ? prop.days : '0' + prop.days }}</span>
					</div>
					<span class="item-left-span">天</span>
				</div>
				<div class="time-item">
					<div class="time-item-left">
						<span>{{ prop.hours >= 10 ? prop.hours : '0' + prop.hours }}</span>
					</div>
					<span class="item-left-span">时</span>
				</div>
				<div class="time-item">
					<div class="time-item-left">
						<span>{{ prop.minutes >= 10 ? prop.minutes : '0' + prop.minutes }}</span>
					</div>
					<span class="item-left-span">分</span>
				</div>
				<div class="time-item" v-if="prop.days < 1">
					<div class="time-item-left">
						<span>{{ prop.seconds >= 10 ? prop.seconds : '0' + prop.seconds }}</span>
					</div>
					<span class="item-left-span">秒</span>
				</div>
			</template>
		</van-count-down>
		<div class="invite-friends-btn" @click="clickPreviewInvite" v-if="isShowShare">
			<div>
				<van-icon name="plus" size="1.1rem" class="btn-icon" />
				<span>邀请好友</span>
			</div>
		</div>
		<div class="dividingLine"></div>
		<div class="brief-introduction">
			<div class="brief-introduction-left">
				<img :src="roomInfo.roomInfo.userAnchor.headImg">
				<span>{{ roomInfo.roomInfo.userAnchor.nickname }}</span>
			</div>
			<div class="colltect-live" @click="clickCollect"
				:class="[$store.state.isCollect ? 'colltect-live-gray' : 'colltect-live-red']" >
				{{ $store.state.isCollect ? '已收藏' : '收藏' }}
			</div>
		</div>
		<div class="brief-introduction-content">
			<div class="content-html" v-html="roomInfo.roomInfo.topWord">
			</div>
		</div>
		<div class="dividingLine"></div>
		<div class="commodity-title"
		     v-if='shoppingData && shoppingData.goods && shoppingData.goods.goodsList.length'>
			<p>直播产品</p>
		</div>
		<div class="commodity-list" v-if='shoppingData && shoppingData.goods && shoppingData.goods.goodsList.length'>
              
				<div class="list-item" v-for="(v, index) in shoppingDataInfo.goods.goodsList" :key='index'  @click="getGoodsRiskTip(v)">
					<div class="list-item-left">
						<img :src="`${v.imgUrl}?x-oss-process=image/resize,m_fixed,h_190,w_190`" alt="">
					</div>         
					<div class="list-item-right">
						<p class="title-shopping">{{ v.title }}</p>
						<p class="des-content">{{ v.subTitle || '' }}</p>
						<div class="tags-box">
							<ul v-if="v.labelList.length > 0">
								<li v-for="(w, i) in  v.labelList" :key="i">{{ w }}</li>
							</ul>
						</div>
						<!-- <p class="tags"><span v-for="(w, i) in  v.labelList" :key="i">{{ w }}</span></p>            -->
						<div class="list-item-right-bottom">
							<!-- 1 实物商品 2理财产品 3虚拟商品 -->
							<template v-if="v.type === 1">                
								<p class="bottom-p">
								<span class="price">{{ v.price }}<span v-if="v.priceUnit">/{{ v.priceUnit }}</span></span>
								<span class="line-price">{{ v.priceLine }}</span>
								</p>
							</template>
							<template v-else-if="v.type === 2">
								<!-- 1 收益率 2 起购价 -->
								<div v-if="v.proPriceType == '1'">
								<p class="bottom-p">
									<!-- 收益率 -->
									<span class="price">{{ v.proProfitRate }}</span>
									<!-- 参考收益率和 自定义  1 不展示 2 7日年化 3 近3月年化 4近一年年化 5 成立以来年化 6 业绩比较基准 7 自定义 proProfitRef -->
									<span class="gray-text" v-if="v.proProfitRefType != 1">{{ v.proProfitRefType | filterText(v) }}</span>
								</p>
								</div> 
								<div v-else-if="v.proPriceType == '2'">
								<p class="bottom-p">
									<!-- 起购价 -->
									<span class="price">{{ v.proPriceInit }}</span>
									<!-- 起购价说明 -->
									<span class="gray-text">{{ v.proPriceInitDesc }}</span>
								</p>
								</div>               
							</template>
							<template v-else>                
								<p class="bottom-p">
								<span class="price">{{ v.price }}</span>
								<!-- 价格说明 -->
								<span class="gray-text">{{ v.priceDesc }}</span>
								</p> 
							</template>             
							<button class="btn">{{ v.btnText || '购买' }}</button>
						</div>
					</div>
				</div>
		</div>
		<div class="foot">
			<img src="@/assets/images/zxjt/jinseguangyun.png" alt="">
		</div>
		<!-- 第三方外链返回按钮 -->
    <BackHomePage v-if="isJump" :toJump="toJump" />
	</div>
</template>

<script>
import VideoCom from '@/components/videoCom.vue'; //视频播放
import BackHomePage from '@/components/backHomePage' //三方外链返回首页按钮
import { shoppingRiskTip, isCheckUserAuthShoppingPop ,shoppingDotNum} from '@/util/api.js'
export default {
	props: {
		roomInfo: Object,
		shoppingDataInfo: Object,
	},
	components: {
		VideoCom,
		BackHomePage,//三方外链返回首页按钮
	},
	data() {
		return {
			time: "", //这个时间为毫秒单位
			shoppingDataObj: {},
			isPlayBtn: false,
			roomId: this.$route.params.roomid,
			isVideoDom: true, //视频dom  show
			videoCoverBox: true,
			isShowShare: false,
			classBg:'',
			titleText:'',
			type: null,//类型: 0-直播间,1-回看
			isJump: false, // 是否为第三方外链进入
			toJump: '', //从那个机构跳转过来
			showTitle: true, // 显示预告标题
			beginTime:'',
			addPaddingTop:''
		}
	},
	created() {
		this.type = window.location.href.includes('liveRoom') ? 0 : 1
		let { roomInfo: { video }, tables } = this.roomInfo;
		this.setTime();
		if (video) {
			if (video.substr(video.length - 3) == "mp4" || video.substr(video.length - 3) == "MP4") { //视频
				this.$store.dispatch("videoSrc", video);
				this.isPlayBtn = true
			}
		}
		if( this.$channel == 'zxjtqh'){
			this.classBg = 'qhClass';
			this.titleText = '中信建投Live'
		}else{
			this.classBg = 'defalutClass'
			this.titleText = '蜻蜓Live'
		}
		if(window.terminal.isZxjtApp){
			this.addPaddingTop = 'padding-top'
		}
		if (tables.length) {
			for (let ele of tables) {
				if (ele.type == '4' && ele.invitaCard) {
					if(this.$channel == 'zxjt'){
                        if(window.terminal.isZxjtApp){
							this.isShowShare = true;
						    }
						}else{
							this.isShowShare = true;
						}	
				}
			}
		}  
		// 是否为三方外链跳转
		if(!!window.sessionStorage.getItem('isJump')){
			this.isJump = !!window.sessionStorage.getItem('isJump')
			this.toJump = window.sessionStorage.getItem('toJump')
		}
		this.$bus.$on('changeCountDown', (bool) => {
				this.showTitle = bool
		})
	},
	computed: {
        shoppingData (){
		    return this.shoppingDataInfo
		}
	},
	methods: {
		previewBack() {
			fun.liveBackFun();
		},
		clickPreviewInvite() {
			this.$emit("formChildMsg", {
				type: 'clickPreviewInvite',
				data: ''
			});
		},
		clickCollect() {
			if (this.$store.state.isYk) { //游客
				fun.ykDisposeFun();
				return
			}
			if (this.$store.state.isCollect) {
				fun.setLiveCollectFun(this.roomId, '0');
			} else {
				fun.setLiveCollectFun(this.roomId, '1');
			}
		},
		playBtn() {
			this.isVideoDom = true; //视频 dom显示
			this.isPlayBtn = false;
			this.$refs.videoCom.playStart();
			this.videoCoverBox = false;
		},
		 //购买风险弹窗内容
		 async getGoodsRiskTip(item) {
			const {id} = item ;
			//goods:{商品ID}:{type,1-直播,2-回看}:{roomId/videoId}
			const params = {
			'id':`goods:${id}:${window.location.href.includes('liveRoom') ? 1 : 2}:${this.$route.params.roomid ||this.$route.params.id}`,
			'plat': fun.getPlatform()
			}
			shoppingDotNum(params)
			try {
				const msgData = await shoppingRiskTip(this.roomId, this.type)
				//enPopUpWin 是否需要验证
				const { code, data } = msgData.data;
				if (code === '000000') {
				if (data) {
					const buyRiskObj = data;
					const { enPopUpWin } = data;
					if (enPopUpWin) {//true 开
					//查询是否授权过
					const msg = await isCheckUserAuthShoppingPop(this.roomId, this.type);
					const { code, data } = msg.data
					if (code === '000000') {
						if (data) {//已经授权
						this.toOrder(item)
						} else {//未授权
						this.$emit('formChildMsg', {
							type: 'openBuyRisk',
							data: { buyRiskObj, shoppingLinkInfo: {item} }
						})
						}
					}
					} else {
					this.toOrder(item)
					}
				} else {
					this.toOrder(item)
				}
				}
			} catch (error) {

			}
			},
		toOrder(item) { // id 商品id vLink 商品链接
			// 神策打点（商品 - 预告 - button）
			const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
			$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
				page_name: `直播${['预告', '详情'][roomStatus]}页`,
				user_nickname: this.$store.state.userInfo.nickname,
				live_room_id: roomId,
				live_room_name: title,
				live_room_status: ['预告', '直播中'][roomStatus],
				live_room_creator: anchor,
				function_name: '商品',
			});
			fun.shoppingLink(item)
        },
		timeFinish() {//倒计时结束
			this.$emit("formChildMsg", {
				type: 'timePreviewEnd',
				data: ''
			});
			this.$store.dispatch('setLiveIsStart', true)
		},
		setTime() {
			let { beginTime } = this.roomInfo.roomInfo;
			//this.roomInfo.roomInfo.beginTime = '2022-01-22 13:51:10'
			let date = "";
			if (window.terminal.ios) {
				beginTime = beginTime.replace(/-/g, '/')
				date = new Date(beginTime);
			} else {
				date = new Date(beginTime);
			}
			let year = "";
			let day = "";
			year = date.getMonth() + 1 + '月';
			day = date.getDate() + '日';
			let hours = date.getHours();
			hours = hours > 9 ? hours : '0' + hours;
			let minutes = date.getMinutes();
			minutes = minutes > 9 ? minutes : '0' + minutes;
			let str = year + day + ' ' + hours + ':' + minutes;
			beginTime = str;
			this.beginTime = beginTime;
			if (window.terminal.ios) {
				let myDate = new Date().getTime();
				let time = date.getTime();
				this.time = time - myDate;
			}else{
				let myDate = new Date();
				this.time = date - myDate;
			}
		}
	}
}
</script>

<style scoped="scoped" lang="less">
.width-video {
	position: absolute;
	top: 0;
	left: 0;
}

.preview-page-box {
	width: 100%;
	height: 100%;	
	background: #2A2A2A;
	overflow-y: scroll;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1006;
    &.padding-top{
		padding-top: 88px;
	 }
	.title {
		height: 88px;
		font-size: 36px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.85);
		line-height: 88px;
        text-align: center;
		position: relative;
		.title-icon {
			width: 44px;
			height: 44px;
			color: rgba(255, 255, 255, 0.85);
			position: absolute;
			top: 22px;
			left: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.video-top-box {
		width: 100%;
		height: 646px;		
		background-size: 750px 646px;
        &.qhClass{
			background-image: url('../../../assets/images/zxjt/yugaoImg-qh.png');
		}
		&.defalutClass{
			background-image: url('../../../assets/images/zxjt/yugaoImg.png');
		}
		.video-box {
			width: 100%;
			height: 424px;
			margin-top: calc(129px - 18px);
			position: relative;
            background: #000;
			.video-cover-box {
				width: 100%;
				position: absolute;
				z-index: 1;
				left: 0;
				bottom: 0;
				z-index: 3;
				img {
					width: 100vw;
					height: 424px;
				}

				.play-btn {
					width: 120px;
					height: 120px;
					background: url(../../../assets/images/play-img.svg) no-repeat;
					background-size: 120px 120px;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -60px;
					margin-left: -60px;
					z-index: 10;
				}


			}
			.live-title {
					position: absolute;
					left: 0;
					bottom: 0;
					z-index:10;
					width: 100%;
					height: 100px;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
					transition: all .3s linear 0s;
					p {
						font-size: 34px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 100px;
						padding-left: 12px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					&.move {
							transform: translateY(100%);
							opacity: 0;
						}
				}
			.item-title-img-type {
				height: 55px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9999;

				.title-img {
					width: 100%;
					height: 100%;
					position: relative;
					text-align: center;

					img {
						width: 366px;
						height: 100%;
					}

					span {
						position: absolute;
						top: 6px;
						font-size: 30px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 42px;
					}

					.title-img-yugao {
						left: 20px;
					}

					.title-img-time {
						left: 129px;
					}
				}
			}
		}

		.yugao-img-bottom {
			text-align: center;
			margin-top: 43px;
			font-size: 32px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFD79D;
			line-height: 45px;
		}
	}

	.time {
		width: 100%;
		height: 120px;
		margin-top: 26px;
		display: flex;
		justify-content: center;

		.time-item:not(:nth-child(1)) {
			margin-left: 45px;
		}

		.time-item {
			display: flex;

			.time-item-left {
				min-width: 120px;
				height: 120px;
				background: #4F4F4F;
				box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
				border-radius: 12px;
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					font-size: 72px;
					font-family: ZhenyanGB-Regular, ZhenyanGB;
					font-weight: 400;
					color: #EFEFEF;
					line-height: 74px;
				}
			}

			.item-left-span {
				font-size: 40px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #DFDFDF;
				line-height: 56px;
				margin: 57px 0 0 10px;
			}
		}
	}

	.invite-friends-btn {
		display: flex;
		justify-content: center;
		margin-top: 43px;

		div {
			width: 206px;
			height: 62px;
			background: linear-gradient(180deg, #FFE6B6 0%, #FFD497 100%);
			border-radius: 31px;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				font-size: 28px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2A2A2A;
				line-height: 40px;
				margin-left: 10px;
			}

			.btn-icon {
				font-weight: 600;
			}
		}
	}

	.dividingLine {
		width: 100%;
		height: 8px;
		background: #2F2F2F;
		margin-top: 43px;
	}

	.brief-introduction {
		margin-top: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 35px 0 40px;

		.brief-introduction-left {
			img {
				width: 69px;
				height: 69px;
				border-radius: 50%;
				vertical-align: middle;
			}

			span {
				font-size: 28px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40px;
			}
		}

		.colltect-live {
			border-radius: 27px;
			padding: 7px 24px;
			border-radius: 27px;
			line-height: 36px;
			font-size: 28px;
			display: flex;
			font-weight: 600;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}

		.colltect-live-red {
			background: linear-gradient(223deg, #FF3088 0%, #FE4858 100%);
		}

		.colltect-live-gray {
			background: #999999;
		}
	}

	.brief-introduction-content {
		padding: 0 40px 0 40px;
		display: flex;
		justify-content: space-between;

		.content-html {
			width: 100%;
			font-size: 28px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 40px;

			// background: saddlebrown;
			/deep/a {
				color: inherit;
			}
		}
	}

	.commodity-title {
		margin-left: 42px;
		font-size: 32px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 45px;
		margin-top: 40px;
	}

	.commodity-list {
		padding: 0 33px 65px 42px;

		.list-item {
			margin-top: 26px;
			display: flex;
			justify-content: space-between;

			.list-item-left {
				width: 193px;
				height: 193px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.list-item-right {
				width: 451px;
				display: flex;
				flex-direction: column;

				p {
					font-size: 30px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 42px;
					overflow: hidden; // 溢出隐藏
					white-space: nowrap; // 强制一行
					text-overflow: ellipsis; // 文字溢出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.title-shopping{					
					text-align: left;
				}

				.des-content {
					height: 37px;
					margin-bottom: 6px;
					font-size: 26px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.4);
					line-height: 37px;
					overflow: hidden; // 溢出隐藏
					white-space: nowrap; // 强制一行
					text-overflow: ellipsis; // 文字溢出显示省略号
				}

				.tags-box {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 14px;
					min-height: 35px;

					ul {
						li {
							width: fit-content;
							margin-bottom: 4px;
							padding: 10px 14px;
							background: rgba(255, 173, 66, 0.15);
							border-radius: 12px;
							font-size: 22px;
							color: #FF9409;
							margin-right: 10px;
						}
					}
				}


				.list-item-right-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
                    .bottom-p{
						width: 250px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price {
						font-size: 32px;
						font-weight: 400;
						color: #FFD59A;

						span {
							font-size: 20px;
						}

						.price-unit {
							margin-left: 12px;
							font-size: 20px;
							font-weight: 400;
							color: rgba(255, 255, 255, 0.4);
							line-height: 28px;
							text-decoration: line-through;
						}
					}


					button {
						width: 172px;
						height: 56px;
						background: #2A2A2A;
						border-radius: 28px;
						border: 2px solid #FFD59A;
						font-size: 30px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFD59A;
						line-height: 42px;
					}
				}
			}
		}
	}

	.foot {
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
